<template>
  <div class="body">
    <div class="leftNavContent">
      <div class="title">
        ORDER聚造 <img src="../../public/image/icon.png" class="icon" />
      </div>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#2c2c2c"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
      >
        <!-- 首页管理 -->
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>首页管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/homeSwiper">轮播图管理</el-menu-item>
            <el-menu-item index="/index/homeCategory">分类区管理</el-menu-item>
            <el-menu-item index="/index/homeRecommend">为您推荐</el-menu-item>
            <el-menu-item index="/index/homeNews">首页新闻</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- 分类管理 -->
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>分类管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/categoryCategory"
              >分类管理</el-menu-item
            >
            <el-menu-item index="/index/categoryBanner">品牌管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/index/categoryGoods">
          <i class="el-icon-menu"></i>
          <span slot="title">商品管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="rightContent">
      <div class="headContent">
        <div @click="changeAvatar">
          <img class="avaturl" :src="avatar" alt="" />
        </div>
        <div class="lead">超级管理员</div>
        <el-tooltip placement="top">
          <div slot="content" @click="dialogFormVisible = true">修改密码</div>
          <div class="name">{{ nickName }}, 您好！</div>
        </el-tooltip>
        <div class="loginOut" @click="loginOut">退出登录</div>
      </div>
      <!-- 路由 -->
      <router-view></router-view>
      <!--  修改密码表单 -->
      <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
        <!-- 输入框 -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 旧密码 -->
          <el-form-item label="旧密码" prop="passWord">
            <el-input
              type="password"
              autocomplete="off"
              v-model.number="ruleForm.passWord"
            ></el-input>
          </el-form-item>
          <!-- 新密码 -->
          <el-form-item label="新密码" prop="newPassWord">
            <el-input
              type="password"
              v-model="ruleForm.newPassWord"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item label="确认密码" prop="comfirmPassWord">
            <el-input
              type="password"
              v-model="ruleForm.comfirmPassWord"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button type="primary" @click="changePassWord">提交</el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <Upload @load="init" ref="Editer"></Upload>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
import Upload from "./Upload.vue";
export default {
  components: { Upload },
  created() {
    this.init();
  },

  data: function () {
    //密码验证
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.comfirmPassWord !== "") {
          this.$refs.ruleForm.validateField("comfirmPassWord");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPassWord) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      avatar: "",
      nickName: "",
      dialogFormVisible: false,
      //表单内容
      ruleForm: {
        passWord: "",
        newPassWord: "",
        comfirmPassWord: "",
      },
      //验证规则
      rules: {
        passWord: { required: true, message: "请输密码", trigger: "blur" },
        newPassWord: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        comfirmPassWord: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  props: {
    msg: String,
  },

  methods: {
    init() {
      let avatar = localStorage.getItem("avatar");
      let user = localStorage.getItem("user");
      if (!user) {
        location.href = location.origin + "#/login";
      } else {
        user = JSON.parse(user);
        this.avatar = avatar;
        this.nickName = user.nickName;
      }
    },
    changeAvatar() {
      this.$refs.Editer.openFile();
    },
    //退出登录
    loginOut() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$http({
            url: "/admin/loginOut",
          }).then((res) => {
            if (!res.errorMsg) {
              localStorage.removeItem("token");
              localStorage.removeItem("user");
              localStorage.removeItem("userName");
              location.href = "#/login";
              this.$message({
                type: "success",
                message: "退出登录成功!",
              });
            } else {
              console.log(res.errorMsg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleOpen(key, keyPath) {},

    handleClose(key, keyPath) {},
    //修改密码
    changePassWord() {
      this.$refs.ruleForm.validate((valid) => {
        //如果有密码，新密码一致
        if (
          this.ruleForm.passWord &&
          this.ruleForm.newPassWord == this.ruleForm.comfirmPassWord
        ) {
          if (valid) {
            this.$http({
              url: "/admin/changePassWord",
              method: "POST",
              data: {
                passWord: md5(this.ruleForm.passWord.toString()),
                newPassWord: md5(this.ruleForm.newPassWord.toString()),
              },
            }).then((res) => {
              if (!res.errorMsg) {
                localStorage.setItem("token", res.token);
                localStorage.setItem("user", JSON.stringify(res));
                location.href = "#/login";
                this.$message({
                  type: "success",
                  message: "修改密码成功，请重新登录!",
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        }
      });
    },
  },
};
</script>

<style scoped>
html {
  margin: 0;
  padding: 0;
}

.body {
  background-size: cover;
  margin: -8px;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #eff6fc;
}

.leftNavContent {
  position: fixed;
  width: 15%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../../public/image/leftNav.png);
}

.leftNavContent .title {
  width: 100%;
  margin-top: 6px;
  margin-left: -20px;
  text-align: center;
  height: 30px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 31px;
}

.leftNavContent .title .icon {
  position: absolute;
  margin-top: 12px;
  margin-left: 20px;
  width: 12px;
  height: 10px;
}

.rightContent {
  margin-left: 15%;
}

.rightContent .headContent {
  height: 50px;
  margin-top: 30px;
  display: flex;
}

.rightContent .avaturl {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-left: 850px;
}

.rightContent .lead {
  line-height: 50px;
  display: inline-block;
  color: #eab924;
  font-size: 14px;
  margin-left: 8px;
}

.rightContent .name {
  line-height: 50px;
  display: inline-block;
  color: black;
  font-size: 14px;
  margin-left: 8px;
}

.rightContent .loginOut {
  width: 70px;
  height: 30px;
  background-color: #f56c6c;
  line-height: 30px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  margin-top: 10px;
  margin-left: 4px;
  border-radius: 15px;
}
</style>